<template>
  <div class="effectArea publicZIndexEffectArea">
    <!-- 进场效果 -->
    <enterEffect />
    <!-- 霸屏 -->
    <Bapin />
    <!-- 祝福礼物 -->
    <div class="giftContainer">
      <div class="svgaContainer" ref="svgaContainer"></div>
    </div>
    <!-- 霸气弹幕 -->
    <Danmu />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import SVGA from 'svgaplayerweb';
import Danmu from '@/components/Danmu/index.vue';
import Bapin from '@/components/Bapin/index.vue';
import enterEffect from '@/components/enterEffect/index.vue';

export default {
  name: 'effectArea',
  computed: {
    ...mapState({
      currentGiftEffect: (state) => state.live.currentGiftEffect,
    }),
  },
  data() {
    return {};
  },
  watch: {
    currentGiftEffect(newVal) {
      if (!newVal.id) {
        return;
      }
      console.log('***currentGiftEffect***');
      console.log(newVal);
      this.playGiftDanmu(newVal);
      this.playSvga(newVal.path);
    },
  },
  components: {
    Danmu,
    Bapin,
    enterEffect,
  },
  methods: {
    playSvga(path) {
      this.SVGAPlayer = new SVGA.Player(this.$refs.svgaContainer);
      this.SVGAPlayer.loops = 1;
      this.SVGAPlayer.onFinished(() => {
        this.$store.commit('live/removeFromGiftQueue');
        this.SVGAPlayer.stopAnimation();
        this.SVGAPlayer.clear();
        this.SVGAPlayer = null;
      });

      this.$svgaParser.load(path, (videoItem) => {
        this.SVGAPlayer.setVideoItem(videoItem);
        this.SVGAPlayer.startAnimation();
      });
    },
    playGiftDanmu(pObj) {
      this.$createGiftDanmu({
        nickname: pObj.userName,
        headImg: pObj.headImg,
        giftName: pObj.giftName,
        giftImg: pObj.imgPath,
        shijian: pObj.shijian,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.effectArea {
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
  .giftContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    .svgaContainer {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
